<template>
	<view>
		<view class="cell_box">
			<view class="cell_item" @click="showTime(1)">
				<view class="title">开始：</view>
				<view class="time">{{start_date || '请选择开始时间'}}</view>
			</view>
			<view class="cell_item" @click="showTime(2)">
				<view class="title">截止：</view>
				<view class="time">{{end_date || '请选择结束时间'}}</view>
			</view>
		</view>
		<view class="btn_box" @click="sureSub">
			确定
		</view>
		<u-picker v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					year: true,
					month: true,
					day: true
				},
				show: false,
				type: 1,
				start_date: '',
				end_date: ''
			};
		},
		onLoad() {},
		onReachBottom() {},
		methods: {
			showTime(type) {
				this.type = type
				this.show = true
			},
			confirm(obj) {
				let arr = Object.keys(obj)
				let sign = '-'
				if (this.type == 1) {
					this.start_date = this.getStr(arr, sign, obj)
				} else {
					this.end_date = this.getStr(arr, sign, obj)
				}
			},
			getStr(arr, sign, obj) {
				let str = ''
				arr.forEach((key, index) => {
					str += (index > 0 ? sign : '') + obj[key]
				})
				return str
			},
			sureSub() {
				this.$emit('change', {
					end_date: this.end_date,
					start_date: this.start_date
				})
			}
		},
	};
</script>

<style scoped lang="scss">
	.cell_box {
		background-color: #fff;

		.cell_item {
			border-top: 2rpx solid #f5f5f5;
			display: flex;
			align-items: center;
			height: 90rpx;
			padding: 0 28rpx;

			.title {
				color: #000;
				font-weight: bold;
			}

			.time {
				flex: 1;
				overflow: hidden;
				text-align: center;
				color: #6A6A6A;
			}
		}
	}

	.btn_box {
		margin-top: 140rpx;
		margin: 180rpx 60rpx 0;
		background-color: var(--color);
		color: #fff;
		text-align: center;
		line-height: 78rpx;
		font-size: 30rpx;

		&:active {
			opacity: .85;
		}
	}
</style>
